$(function(){
    // 先取到用户id
    var id = getCookie('id')
    console.log(id)
    // var carId = window.location.search.split('=')[1];
    // console.log(carId)
    // 点击详情页加购时调用查看购物车数据的接口渲染页面
    
    $.ajax({
        type: "get",
        url: "http://jx.xuzhixiang.top/ap/api/cart-list.php",
        data: {id:id},
        dataType: "json",
        success: function (res) {
            console.log(res)
            var data=res.data;//data此时是个数组，遍历拿到数组的每一个对象
            // 点击加购时渲染购物车页面
            let sTr =''; 
            $(data).each(function(i){
               
                sTr+= `<div class="car-box clear_fix">
                        <div class="show-left clear_fix">
                            <img src=${data[i].pimg} alt="">
                            <div class="janjie">
                                <h3>${data[i].pname}</h3>
                                <h4>Powder Kiss Lipstick<br>3克</h4>
                                <p>${data[i].pdesc}</p>
                                <span class='remove_car'  data-id="${data[i].pid}">移除购物车</span>
                            </div>
                            <input type="checkbox" class="ck">
                            
                        </div>
                        <div class="show-right clear_fix">
                            <div class='unitPrice'>${data[i].pprice}</div>
                            <div class="num">
                                <div class='minus' data-id="${data[i].pid}">-</div>
                                <div class="geshu">${data[i].pnum}</div>
                                <div class='add-num' data-id="${data[i].pid}">+</div>
                            </div>
                            <div class="smlprice">${Number(data[i].pnum)*data[i].pprice}</div>
                        </div>
                    </div>`
            })
            $('.showArea').append(sTr)
            // 获取页面所有的类名为remove_car的元素（移除购物车按钮）
            let aNums = document.getElementsByClassName("remove_car");
            console.log(aNums.length)
            // 点击购物车中移除购物车按钮，将该商品信息移除页面
            // 怎么直到要删的商品呢？通过商品id怎么在移除购物车这个元素上拿到商品id？给这个元素加上属性让他的属性值
            // 是渲染页面时所拿到的数据的商品pid，这样通过获取电机的移除购物车的属性值就可以判断要删的商品
            for (let i = 0; i < aNums.length; i++) {
                // 给每一个移除购物车的元素添加点击事件
                $('.remove_car').eq(i).click(function () {
                // 获取点击的元素的data-id（渲染页面时存在移除购物车元素的属性里的的商品pid）保存到pid中，请求
                // 删除购物车的接口
                   var pid=$(this).attr("data-id"); 
                    $.ajax({
                        type: "get",
                        url: "http://jx.xuzhixiang.top/ap/api/cart-delete.php",
                        data: { uid: id, pid: pid },
                        dataType: "json",
                        success: function (response) {
                            console.log(response);
                            // console.log(pid);
                            // console.log(uid);
                            // location.reload()
                        }
                    });
                    // 当前this指向被点击的那个移除购物车按钮指向的最外层结构的car-box或者在上边后端返回删除成功时刷新页面
                    $(this).parent().parent().parent().remove();
                });

                 // 获取每一个减号
                 $('.minus').eq(i).click(function () {
                     // console.log($('.minus').eq(i))
                    //  拿到商品的id
                    let pid=$(this).attr("data-id"); 
                    // 拿到商品当前的数量也就是38行的值
                    // next获取下一个同辈元素
                    let pnum = parseInt($(this).next().html());
                    // 点击减号获取当前数量判断小于1则等于1，大于1让它减减，然后传入后台，这时传入后台再次用到了
                    // pnum所以此时pnum已经减了1，请求成功后再把pnum的值（已经少了1），填入页面，
                    // 如果是请求成功前没有减直接将该数值传入了后台，那么请求成功需要--pnum让它直接减1，用pnum--
                    // 是先打印再减，此时数值写到页面时并未改变
                    if(pnum<=1){
                        pnum=1
                        return;
                     }
                     $(this).next().html(pnum--)
                    // console.log(pnum)
                     $.ajax({
                         type: "get",
                         url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                         data: { uid: id, pid: pid, pnum:pnum},
                         dataType: "json",
                         success:(res)=> {
                             
                            //  点击减号改变数量
                             $(this).next().html(pnum)

                            //  点击减号时计算后面的总价
                            $(this).parent().next().html(pnum*data[i].pprice)
                            
                        }
                     });
                     // 当前this指向被点击的那个减号
                    
                 });
                //  点击加号加数量
                $('.add-num').eq(i).click(function () {
                    // console.log($('.minus').eq(i))
                   //  拿到商品的id
                   let pid=$(this).attr("data-id"); 
                   // 拿到商品当前的数量也就是38行的值
                   // next获取下一个同辈元素
                   let pnum = parseInt($(this).prev().html());
                   
                    //  $(this).next().html(pnum++)
                   // console.log(pnum)
                    $.ajax({
                        type: "get",
                        url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                        data: { uid: id, pid: pid,pnum:pnum},
                        dataType: "json",
                        success:()=> {
                            console.log(pnum);
                            // console.log(this)
                            // console.log (parseInt($(this).prev().html()))
                            $(this).prev().html(++pnum)//改变数量115行已经将pnum的字符转成了数值
                            // 获取小计的元素让它的值等于当前数量乘以单价
                            console.log(data)
                            // 计算当前点击加号后面的值此时this指向被点击的加号元素
                            $(this).parent().next().text(pnum*data[i].pprice);
                           
                       }
                    });
                    
                   
                });
                // 获取每一个单选框和全选框
                var  pri=0;
                $('.ck').eq(i).click(function(){
                    pri += Number($(this).parent().next().children(".smlprice").text());
                    // let pri='${Number(data[i].pnum)*data[i].pprice}';
                    console.log(pri)
                    $('.total_price').text(pri)
                    // console.log()

                })
            };
        }
    });
    
})